<template>
  <div class="content_index">
    <div class="ci_header">
      <div class="ci_left">网页取证</div>
    </div>
    <div class="ci_note">
      <DescriptionBlock data="网页取证" />
    </div>
    <div class="ci_des">
      <div class="title_personal">网页取证</div>
    </div>
    <div class="ci_des">
      <el-form
        :model="form"
        ref="webPageFormRef"
        style="width: 100%"
        :rules="webPageFormRefRules"
        label-width="120px"
      >
        <el-form-item label="证据名称：" prop="evidenceName">
          <el-input
            v-model.trim="form.evidenceName"
            placeholder="请输入证据名称(50个字符以内)"
          />
        </el-form-item>
        <el-form-item label="网址：" prop="obtainUrl">
          <el-input
            v-model.trim="form.obtainUrl"
            placeholder="请输入网址(100个字符以内)"
          />
        </el-form-item>

        <el-form-item label="证据介绍：" prop="description">
          <el-input
            type="textarea"
            v-model.trim="form.description"
            placeholder="请输入取证介绍(150个字符以内)"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" :loading="isLoading">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
  <script setup>
import { DescriptionBlock } from "../../components/index";
import store from "@/store";
import { ref, reactive, onBeforeUnmount, onUnmounted } from "vue";
import { isValidURL } from "@/utils/validate";
import { ElMessage } from "element-plus";
import { addObtainWeb } from "@/api/obtainEvidence";
import { useRouter } from "vue-router";
const router = useRouter();
const webPageFormRef = ref("form");
const form = reactive({
  evidenceName: "",
  obtainUrl: "",
  description: "",
});
const isLoading = ref(false);
/** 网址校验规则 */
const ValidURL = (rule, value, callback) => {
  if (value === "") {
    callback(new Error("网址不能为空"));
  } else {
    // 校验身份证
    if (!isValidURL(value)) {
      rule.message = "请输入取证的网址(100个字符以内)";
      callback(new Error());
    } else {
      callback();
      // 注意，这个空的callback非常重要，没有它作为结束，整个校验会出问题
    }
  }
};
/** 表单校验规则 */
const webPageFormRefRules = {
  obtainUrl: [
    {
      required: true,
      message: "请输入取证的网址(100个字符以内)",
      validator: ValidURL,
      trigger: "blur",
    },
    { max: 100, message: "请输入取证的网址(100个字符以内)", trigger: "blur" },
  ],
  evidenceName: [
    {
      required: true,
      message: "请输入取证名称(50个字符以内)",
      trigger: "blur",
    },
    { max: 50, message: "请输入取证名称(50个字符以内)", trigger: "blur" },
  ],
  description: [
    { max: 150, message: "请输入取证介绍,(150个字符以内)", trigger: "blur" },
  ],
};
const onSubmit = () => {
  webPageFormRef.value?.validate(async (valid) => {
    if (valid) {
      isLoading.value = true;
      let parmars = {
        evidenceName: form.evidenceName,
        obtainUrl: form.obtainUrl,
        description: form.description,
      };

      addObtainWeb(parmars).then((res) => {
          if (res.success) {
            // ElMessage.success(res.msg || "网页取证成功!");
            router.push({ path: "/EbtainEvidence/Evidence" });
            isLoading.value = false;
          } else {
            ElMessage.error(res.msg || "网页取证失败!");
            isLoading.value = false;
          }
        })
        .catch((err) => {
          ElMessage.error(err.msg || "网页取证失败!");
          isLoading.value = false;
        });
    } else {
      return false;
    }
  });
};
</script>
  <style lang="scss" scoped>
@import "../../assets/css/list.scss";
@import "../../assets/css/position.scss";

.content_index {
  :deep.el-input {
    width: 90%;
    max-width: 400px;
  }
  :deep .iconfont__header_icon {
    width: 16px;
    margin-top: 8px;
  }
  .title_personal {
    font-size: 16px;
    font-weight: 700;
  }
}
.content_index {
  :deep.el-select {
    width: 95%;
    border-radius: 0;

    :deep .el-input {
      width: 95%;
      border-radius: 0 !important;
    }
    .el-input__suffix {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-input__inner {
      height: 32px;
      line-height: 32px;
      border-radius: 0;
      font-size: 12px;
    }
  }
}

.aitem {
  cursor: pointer;
  color: #2186fb;
}

.nodata_tips {
  margin-left: 5px;
  color: #2186fb;
  cursor: pointer;
}
</style>
  
  
  
  
  
  
  